[CSS] Linebreak 줄바꿈 처리하기, word-wrap, word-break, white-space

글을 작성하는 경우 텍스트의 일부가 영역을 넘어가게되면 이를 해결하기 위해 줄바꿈, 랩핑(wrapping)이 필요합니다. 이와 관련된 다양한 방법들이 존재하며 css에도 랩핑과 관련된 다양한 속성이 존재합니다. 아래는 이와 관련된 속성을 알아보고 예제를 통해 배워보도록 하겠습니다.

! 알아둘 점

시작에 앞서 우리는 줄바꿈에 쓰이는 세 가지 속성을 가장 많이 볼 수 있습니다.

word-wrap
word-break
overflow-wrap


여기서 가장 많이 쓰이던 줄바꿈, 랩핑 속성이 예전에는 단연 word-wrap이었다면 이제는 word-break가 사용됩니다. 그 이유는...

word-wrap의 경우 CSS version 1이지만 최근의 브라우저는 CSS3인 word-break를 사용해도 대부분 완벽히 호환되기 때문입니다. 두 번째 이유로 word-wrap은 해당 엘리먼트에 width값의 설정이 없는 경우 줄바꿈이 동작하지 않습니다. 하지만 이와 달리 word-break를 width를 감안하여 자동 랩핑되기 때문에 다로 설정이 필요할 수 있습니다. 이런 이유로 word-wrap보다는 word-break를 더 권장합니다.
(word-break는 word-wrap 다음에 위치해있습니다.)

# CSS를 사용한 줄바꿈, 랩핑 방법 알아보기

가장 먼저 알아볼 속성은 바로 word-wrap 속성에 대하여 알아보겠습니다.

! word-wrap 속성

word-wrap 속성은 텍스트가 해당 영역을 넘어갈 경우 강제로 줄바꿈을 할 것인지 아니면 그대로 이어서 보이게 할 것인지를 결정하는 css 속성입니다. 우선 간단한 사용방법은 아래와 같습니다. 

word-wrap 속성은 선택가능한 옵션값으로 다음과 같이 normal 그리고 break-word가 존재합니다.

i. normal // 기본값으로 허용된 랩핑만 허락함
ii. break-word // 허용되지 않더라도 줄바꿈이 가능하도록 변경함

word-wrap 속성을 사용할 경우 아래 예제처럼 글이 해당 영역을 넘어가는 경우 랩핑 방법을 결정할 수 있습니다. 그럼 아래 예제 및 소스를 참고하세요.

! word-wrap normal인 경우

먼저 word-wrap 속성을 normal로 사용하는 방법입니다.
@ word-wrap.html

@ word-wrap.css

위 코드를 실행하면 아래와 같이 결과가 출력됩니다.

abcdefghijklmnopqrstuvwxyz

그럼 다른 값인 경우에는 어떻게 나타날까요?

! word-wrap 속성이 break-word 인 경우

다음으로 word-wrap 속성의 값이 만약 break-word인 경우입니다.
@ breakword.html

@ breakword.css

코드를 실행하면 아래처럼 스타일이 적용되어 나타나게됩니다.

abcdefghijklmnopqrstuvwxyz

# word-break 속성 알아보기 다음으로 word-break에 대하여 알아봅니다. 아래와 같이 값을 설정합니다.

#test { word-break: option; }

word-break 속성 역시 줄바꿈과 관련괸 속성으로 단어끼리 붙어있는 경우 줄바꿈이 지동으로 되게 할 것인지를 결정할 수 있습니다. 이 속성에 사용가능한 옵션값은 keep-all 그리고 break-all입니다.

참고로 이 속성은 아시아를 위해 만들어진 속성(영문 텍스트의 경우 자동으로 하나의 연결된 단어는 함께 묶어서 줄바꿈이 이루어집니다. 하지만 한글 이외의 2byte 이상의 문자들은 그렇지 않죠.)으로 영문과 달리 byte단위로 구분되지 않는 언어의 랩핑을 돕습니다. 즉 영문이 아닌 단어의 줄바꿈을 원할 경우 사용하면 좋습니다. 예를들어...

우리는 하나입니다. 이 문장에서 아래와 같이 줄바꿈이 생길 수 있습니다.

우리는 하나입니      <---   이처럼 줄바꿈이 생긴경우...
다.

word-break 사용하면 아래와 같이 바뀝니다. 문장 전체에 적용 역시 가능합니다.

Result)

우리는
하나입니다.

즉, 영문과 달리 의미있는 단어들이 랩핑되는 현상을 막을 수 있게됩니다. 아래는 이를 사용한 예제입니다.

! word-break 설정값 keep-all 예제보기

이번에는 keep-all로 설정하여 결과를 보도록 하겠습니다.
@ keepall.html

@ keepall.css

매우 유용한 속성임에도 표준코드가 아니며 현재로서는 모질라 계열(mozilla, 파이어폭스)과 IE(익스플로러)에서만 사용가능합니다.

---

# white-space 속성 알아보기

이번에는 자동 줄바꿈을 막는데 사용되는 속성인 white-space에 대하여 알아봅니다.

#test { white-space: option; }

이 속성은 텍스트가 랩핑되지 않도록 강제하거나 랩핑되는 방식을 결정할 수 있습니다. 먼저 사용 가능한 속성값으로 아래의 4가지가 있습니다.

1. nowrap
2. pre
3. pre-line
4. pre-wrap

# white-space 예제보기

아래는 텍스트의 일부가 랩핑된 경우 랩핑이 되지 않도록 속성을 추가한 예제입니다. 아래 예제는 두가지로 해당 속성을 전체 또는 일부에 적용한 예제입니다.

웹제작 관련 내용은 Webisfree.com

아래와 같이 white-space를 추가하여 랩핑을 결정할 수 있습니다.
@ whitespace.html

@ whitespace.css

아래는 적용결과입니다. 보시는 것 처럼 영역을 넘어가도 줄바꿈이되지 않게됩니다.

웹제작 관련 내용은 Webisfree.com

보시는 것처럼 모두 한줄로 나타나게 됩니다.

# 마치면서

한글의 경우 영문과 달리 한 단어를 기준으로 랩핑, 두 번째 줄로 넘어가지 않으며 붙어있는 단어라 해도 한 라인이 넘어가면 잘라서 랩핑됩니다. 이런 이유로 영문 표기보다 더 많이 신경을 써주어야하는 어려움이 있습니다.

띄어쓰기를 쉽게 간과할 수 있지만 어떻게 띄어쓰냐에 따라서 눈에 보이는 가시적 효과는 상당히 차이라 날 수 있습니다.